/**
 * 目标1：默认显示-北京市天气
 *  1.1 获取北京市天气数据
 *  1.2 数据展示到页面
 */

// 获取天气数据
function getWeather(cityCode) {
    myAxios({
        url: 'http://hmajax.itheima.net/api/weather',
        params: {
            city : cityCode
        }
    }).then((result) => {
        // 解构
        const {
            area,
            date,
            dateLunar,
            dateShort,
            dayForecast,
            psPm25,
            psPm25Level,
            temperature,
            todayWeather,
            weather,
            weatherImg,
            windDirection,
            windPower,
        } = result.data
        // 阳历和农历日期
        document.querySelector('.top-box .title').innerHTML = `
            <span class="dateShort">${date}</span>
            <span class="calendar">农历&nbsp;
            <span class="dateLunar">${dateLunar}</span>
            </span>
        `
        // 城市名字
        document.querySelector('.top-box .area').innerHTML = `${area}`
        // 今天天气数据
        document.querySelector('.weather-box').innerHTML = `
            <div class="tem-box">
                <span class="temp">
                <span class="temperature">${temperature}</span>
                <span>°</span>
                </span>
            </div>
            <div class="climate-box">
                <div class="air">
                    <span class="psPm25">${psPm25}</span>
                    <span class="psPm25Level">${psPm25Level}</span>
                </div>
                <ul class="weather-list">
                <li>
                    <img src="${weatherImg}" class="weatherImg" alt="">
                    <span class="weather">${weather}</span>
                </li>
                <li class="windDirection">${windDirection}</li>
                <li class="windPower">${windPower}</li>
                </ul>
            </div>
        `
        document.querySelector('.today-weather').innerHTML = `
            <div class="range-box">
                <span>今天：</span>
                <span class="range">
                <span class="weather">${todayWeather.weather}</span>
                <span class="temNight">${todayWeather.temNight}</span>
                <span>-</span>
                <span class="temDay">${todayWeather.temDay}</span>
                <span>℃</span>
                </span>
            </div>
            <ul class="sun-list">
                <li>
                    <span>紫外线</span>
                    <span class="ultraviolet">${todayWeather.ultraviolet}</span>
                </li>
                <li>
                    <span>湿度</span>
                    <span class="humidity">${todayWeather.humidity}</span>%
                </li>
                <li>
                    <span>日出</span>
                    <span class="sunriseTime">${todayWeather.sunriseTime}</span>
                </li>
                <li>
                    <span>日落</span>
                    <span class="sunsetTime">${todayWeather.sunsetTime}</span>
                </li>
            </ul>
        `
        // 未来7天天气
        document.querySelector('.week-wrap').innerHTML = dayForecast.map((item) => {
            return `
                <li class="item">
                    <div class="date-box">
                        <span class="dateFormat">${item.dateFormat}</span>
                        <span class="date">${item.date}</span>
                    </div>
                    <img src="${item.weatherImg}" alt="" class="weatherImg">
                    <span class="weather">${item.weather}</span>
                    <div class="temp">
                        <span class="temNight">${item.temNight}</span>-
                        <span class="temDay">${item.temDay}</span>
                        <span>℃</span>
                    </div>
                    <div class="wind">
                        <span class="windDirection">${item.windDirection}</span>
                        <span class="windPower">${item.windPower}</span>
                    </div>
                </li>
            `
        }).join('')
    }).catch((error) => {
        console.log(error);
    })
}
// 默认进入网页就获取数据
getWeather('110100')

// 搜索城市列表
document.querySelector('.search-city').addEventListener('input', _.debounce(e => {
    myAxios({
        url: 'http://hmajax.itheima.net/api/weather/city',
        params: {
            city: e.target.value
        }
    }).then(result => {
        document.querySelector('.search-list').innerHTML = result.data.map(item => {
            return `
                <li class="city-item" data-id="${item.code}">${item.name}</li>
            `
        }).join('')
    }).catch(error => {
        console.log(error.message);
    })
}, 500))

document.querySelector('.search-list').addEventListener('click', e => {
    if (e.target.tagName === 'LI') {
        getWeather(e.target.dataset.id)
    }
})